<template>
	<view class="page">
		<UserDate :showDate='true' @changeUser='onChangeUser' @changeDate='onChangeUser' />

		<view v-for="(item,index) in listData" :key="index" class="tcard">
			<view class="top">
				<label class="radio">
					<radio :checked="item.checked" @click="checkRadio(item)" />
				</label>
				<view class="label">
					挂号流水号：
				</view>
				<view class="value">
					{{item.preId}}
				</view>
			</view>
			<view class="content">
				<view class="name">
					{{item.deptName}}
					<!-- <view class="tips">
            <text>不支持医保</text>
            <text>已支付</text>
          </view> -->
				</view>
				<!-- <view class="row flexR" v-for="cItem in cardLabel" :key='cItem.key'>
          <view class="label" :style="{color: cItem.key == 'cfje' ? '#FF7F7F':''}">
            {{cItem.label}}
          </view>
          <view class="value" :style="{color: cItem.key == 'cfje' ? '#FF7F7F':''}">
            {{item[cItem.key]||''}} {{cItem.unit||''}}
          </view>
        </view> -->
				<view class="row flexR">
					<view class="label">
						开单医生：
					</view>
					<view class="value">
						{{ item.doctorName}}
					</view>
				</view>
				<view class="row flexR">
					<view class="label">
						开立时间：
					</view>
					<view class="value">
						{{ item.CJRQ}}
					</view>
				</view>

				<view class="row flexR" style="color: #FF7F7F;">
					<view class="label">
						费用小计：
					</view>
					<view class="value">
						{{item.payMoney}}
					</view>
				</view>
			</view>
			<!-- <view class="drug flexR">
        <text>省级11*人表皮生长因子凝胶｜易孚G</text>
        <text>¥38.4x1</text>
      </view> -->
			<!-- <view class="todtl" @click="toPage(item)">
        查看明细 >>
      </view> -->
		</view>

		<view class="pay">
			<view class="" style="line-height: 44upx;">
				<text>
					合计
				</text>
				<text class="money">
					¥{{ totleMoney | fixed }}
				</text>
			</view>
			<view class="btn" @click="toPay">
				去支付
			</view>
		</view>

		<Load :load="load"></Load>

		<Tip :show.sync='showTip' title='门诊缴费提示'>
			<text class="red">1、微信线上支付支持自费及医保支1.付，如遇部分项目无法支付请至线下自助服务区或一站式服务中心办理。</text><br>
			药品在线缴费时间，除12:00-14:00午间休息时间及23:30-00:30夜间结算时间不支持缴费，其余时间均支持。<br>
			2、支付成功后，请在本页面点击已支付按钮，交由相关科室工作人员核实缴费信息后，再进行取药或做检查。<br>
			3、若显示支付失败或支付处理中，请选择其他方式重新支付，已支付的费用将于10个工作日内原渠道退回。<br>
		</Tip>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import Load from '@/components/Load/index.vue'
	import {
		getPrescription
	} from '@/api/home.js'
	import {
		prescriptionPayment,
		regist1erback
	} from '@/api/otherService.js'
	import {
		pay
	} from '@/api/physical.js'

	import UserDate from '@/components/UserInfo/user-date.vue'

	export default {
		components: {
			Load,
			UserDate
		},
		data() {
			return {
				showTip: true,
				listData: [],
				cardLabel: [{
						label: '开单医生：',
						key: 'kfks'
					},
					{
						label: '地点：',
						key: 'zxksdz'
					},
					{
						label: '处方号：',
						key: 'cfxh'
					},
					{
						label: '开立时间：',
						key: 'time'
					},
					{
						label: '费用小计：',
						key: 'cfje'
					},
					// {
					// 	label:'挂号科室：',
					// 	key:'kfks',
					// 	fKey:'label11'
					// },
					// {
					// 	label:'挂号序号：',
					// 	key:'ghxh',
					// 	fKey:'label21'
					// },
					// {
					// 	label:'处方序号：',
					// 	key:'cfxh',
					// 	fKey:'label31'
					// },
					// {
					// 	label:'执行科室：',
					// 	key:'zxksmc',
					// 	fKey:'label4'
					// },
					// {
					// 	label:'科室地址：',
					// 	key:'zxksdz',
					// 	fKey:'label6'
					// },
					// {
					// 	label:'应付金额：',
					// 	key:'cfje',
					// 	fKey:'label5',
					// 	unit:'元'
					// }
				],
				load: false,
				query: {
					serialNumber: '',
					settlementMark: '0'
				},
				queryTime: {},
				// totleMoney:0,
				cfxhhj: ''
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			totleMoney() {
				const sum = this.listData.filter(item => item.checked).reduce((accumulator, current) => accumulator +
					current.payMoney, 0);
				return sum
			}
		},
		async onLoad(op) {
			if (op) {
				this.query = {
					...op
				}
			}
			await this.$onLaunched
			this.initData()
		},
		methods: {
			toPage(val) {
				uni.navigateTo({
					url: '/pages/Service/OutpatientServe/detail?cfxh=' + val.cfxh
				})
			},
			toPayPage() {
				let params = {
					ksmc: this.listData[0].kfks,
					ysxm: this.listData[0].kfys,
					ghxh: this.listData[0].ghxh,
					cfxhhj: this.cfxhhj
				}
				params = JSON.stringify(params)
				if (this.listData[0]) {
					uni.navigateTo({
						url: `/pages/Pay/prescriptionPay?params=${params}`
					})
				}
			},
			initData() {
				this.load = true
				let params = {
					...this.query,
					...this.queryTime,
					patid: this.userInfo.cardNo,
					// patid: '0000119416',
					//      "startTime":"2024-02-01",
					//      "endTime":"2024-02-02"
				}
				getPrescription(params).then(data => {
					this.load = false
					let res = data.list || ''
					if (res) {
						this.listData = res || []
						this.totleMoney = res.totalAmount
						this.cfxhhj = res.cfxhhj
					} else {
						this.listData = []
						this.totleMoney = 0
					}
				}).catch(e => {
					this.listData = []
					this.totleMoney = 0
					this.load = false
				})
			},
			checkRadio(item) {
				this.$set(item, 'checked', !item.checked)
			},
			onChangeUser(queryTime) {
				this.queryTime = queryTime
				this.initData()
			},

			toPay() {
				const data = {
					idCard: this.userInfo.idCard,
					list: this.listData.filter(item => item.checked)
				}
				console.log(prescriptionPayment)
				prescriptionPayment(data).then(res => {
					console.log(res)
					this.pay(res)
				})
			},

			pay(dealcode) {
				this.load = true
				const data = {
					body: '门诊缴费',
					orderId: dealcode,
					payMoney: this.opt.amount,
					// payMoney: '0.01',
					spbCreIp: '127.0.0.1',
					openId: this.userInfo.userId,
					account: this.userInfo.userId
				}
				pay(data).then(res => {
					// alert(JSON.stringify(res))

					// regist1erback({patId: this.userInfo.cardNo,dealCode: dealcode}).then(res => {
					//   uni.hideLoading()
					//   toast('支付成功')
					// })

					this.onBridgeReady(res, dealcode)
				}).finally(() => {
					this.load = false
				})
			},

			onBridgeReady(res, dealcode) {
				// alert('onBridgeReady')
				const toast = this.$u.toast
				WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId": res.appId, //公众号ID，由商户传入     
						"timeStamp": res.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": res.nonceStr, //随机串     
						"package": res.package,
						// "signType": "RSA",     //微信签名方式：     
						"signType": "MD5", //微信签名方式：
						"paySign": res.paySign //微信签名 
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							// alert('跳转成功页面')
							uni.showLoading({})
							regist1erback({
								patId: this.userInfo.cardNo,
								dealCode: dealcode
							}).then(res => {
								uni.hideLoading()
								toast('支付成功')
							})
						}
					});
			}
		}
	}
</script>

<!-- <style lang="scss" scoped>
	.prescription-info{
		height: calc(100vh - 110rpx);
		margin-bottom: 110rpx;
		overflow: scroll;
		background-color: $uni-bg-color;
		position: relative;
		&-position{
			box-shadow: 0 -8rpx 8rpx rgba($color: #000000, $alpha: 0.12);
			width: calc(100vw);
			position: fixed;
			bottom: 0;
			left: 0;
			height: 110rpx;
			line-height: 110rpx;
			font-size: 36rpx;
			z-index: 2;
			&-pay{
				background-color: $theme-color-light;
				color: #FFFFFF;
				width: 340rpx;
				text-align: center;
			}
			>.totle-money{
				background-color: #FFFFFF;
				flex: 1;
				padding-left: 40rpx;
				>text{
					color: $orage-color;
				}
			}
		}
	}
</style> -->

<style lang="less" scoped>
	.page {
		background-color: #F5F9FF;
	}

	.pay {
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 108upx;
		padding: 0 32upx;
		box-shadow: 0px -8px 76px 22px rgba(227, 237, 255, 0.58);
		background-color: #FFF;

		.cross {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: #DADADA;
			line-height: 48upx;
			text-decoration: line-through;
			margin-left: 10upx;
		}

		.btn {
			width: 240upx;
			height: 64upx;
			background: #366AA4;
			border-radius: 64upx;
			text-align: center;
			line-height: 64upx;
			color: #FFF;
		}
	}

	.money {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32upx;
		color: #3E81F7;
		line-height: 44upx;
	}

	.tcard {
		padding: 24upx;

		.top {
			display: flex;
			border-bottom: 1px solid rgba(0, 0, 0, 0.12);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			line-height: 32upx;
			padding-bottom: 24upx;

			::v-deep.uni-radio-input {
				width: 32upx;
				height: 32upx;
			}
		}

		.content {
			padding: 24upx 0;

			.name {
				display: flex;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24upx;
				color: rgba(0, 0, 0, 0.7);
				line-height: 44upx;

				.tips {
					margin-left: auto;

					>text {
						height: 36upx;
						padding: 0 24upx;
						line-height: 36upx;
						border-radius: 4upx;
						margin-left: 16upx;

						&:nth-child(1) {
							background: #E2E2E2;
							color: rgba(0, 0, 0, 0.36);
						}

						&:nth-child(2) {
							background: #5DD2B1;
							color: #FFF;
						}
					}
				}
			}

			.row {
				display: flex;
			}
		}

		.drug {
			justify-content: space-between;
			height: 74upx;
			line-height: 74upx;
			padding: 0 24upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24upx;
			color: rgba(0, 0, 0, 0.7);
			background: #F4F8FF;
		}

		.todtl {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: #3E81F7;
			text-align: center;
			margin-top: 24upx;
		}

		.label {
			color: rgba(0, 0, 0, 0.4);
		}

		.value {
			color: rgba(0, 0, 0, 0.7);
		}
	}
</style>